<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='../js/vue.js'></script>
    <script src="../js/vue-router_3.0.2.js"></script>
</head>
<body>
    <div id='app'>
        <router-link to="/index">主页</router-link>
        <router-link to="/post">文章</router-link>
        <router-link to="/category">分类</router-link>

        <router-view></router-view>
    </div>
    <script type='text/javascript'>
        const Index = {
            template: `<div><h1>这是主页页面</h1></div>`
        }
        const Post = {
            template: `<div><h1>这是文章页面</h1></div>`
        }
        const Category = {
            template: `<div>
                <router-link to="/category/life">生活馆</router-link>
                <router-link to="/category/sport">运动馆</router-link>
                <router-link to="/category/travel">爱旅游</router-link>
                <router-view/>
            </div>`
        }
        const Life = {
            template: `<div>
                <h1>欢迎来到生活馆</h1>
                <router-link to="/category/life/user1">生活馆用户1</router-link>
                <router-link to="/category/life/user2">生活馆用户2</router-link>
                <router-link to="/category/life/user3">生活馆用户3</router-link>
                <router-view/>
            </div>`
        }
        const Sport = {
            //通过props接收对象内多参数，在route路由模块中使用props定义传递的参数，但这种方法不能传递url中以:开头的参数
            props: ['uname','age'],
            template: `<div><h1>欢迎来到运动馆,用户名：==={{uname}}===年龄{{age}}===</h1></div>`
        }
        const Travel = {
            template: `<div><h1>欢迎来到爱旅游</h1></div>`
        }
        const Userlist = {
            template: `<div><h1>欢迎来到=={{$route.params.name}}</h1></div>`
        }

        const router = new VueRouter({
            routes: [
                { path: '/', redirect: '/index'},
                { path: '/index', component: Index},
                { path: '/post', component: Post},
                { path: '/category',
                    component: Category,
                    children: [
                        { path: '/category/life',component: Life,children: [
                            {path: '/category/life/:name',component: Userlist}
                        ]},
                        { path: '/category/sport', component: Sport,props:{uname:'弱音',age:25}},
                        { path: '/category/travel', component: Travel}
                    ]
                }
            ]
        })

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            },
            router
        });
    </script>
</body>
</html>